<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浏览器渲染</title>
</head>
<body>
    
    <!-- 
        1、html -> dom tree 
        2、css -> cssom tree
        3、dom tree + cssom tree -> 渲染树
        4、遍历渲染树开始布局，计算每个节点的位置大小信息

        [
            先将html解析成 dom tree
            再将css解析成 css rule tree
            再把 dom tree 和 css tree 合成 render tree （渲染树）
            浏览器就知道都有那个节点以及节点的css，从而计算他们的位置信息，显示渲染出来。
        ]
        
     -->

</body>
</html>